<!DOCTYPE html>
<html>
<head>
    <title>{{.Doc.title}}</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/3.0.4/tocbot.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/3.0.4/tocbot.css"/>
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <link href="styles/highlight/sunburst.css" rel="stylesheet">
    <link href="styles/markdown.css" rel="stylesheet">
    <script>hljs.initHighlightingOnLoad();</script>

    <style>
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 980px;
            margin: 0 auto;
            padding: 45px;
            background:#f8f8f8;
        }
    </style>

    <script>
        $(document).ready(function () {
            //为各级标题自动生成id属性
            $("h1,h2,h3").each(function () {
                var hyphenated = $(this).text().replace(/\s/g, '-');
                $(this).attr('id', hyphenated);
            });
            // 初始化 toc 内容
            tocbot.init({
                tocSelector: '.toc', // 放置 toc 内容的容器
                contentSelector: '.markdown-body', // markdown 文档内容所在
                headingSelector: 'h1, h2, h3', // 需要索引的标题级别
                positionFixedSelector: ".toc" //将 toc 内容块位置固定。
            });
        });
    </script>
    <link rel="stylesheet" href="../markdown/styles/markdown.css">
</head>
<body>
<div class="toc">
</div>
<div class="markdown-body">
    {{.Doc.body}}
</div>
</body>
</html>